<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>垂直手风琴</title>
	<!-- 事先引入好的字体图标库 源码会放在简介 自行下载即可 -->
	<link rel="stylesheet" href="css/font-awesome.min.css" />
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<style>
		* {
			/* 页面初始化 清除元素原有的内外边距 */
			padding: 0;
			margin: 0;
			/* 盒子模型 */
			box-sizing: border-box;
		}

		/* :not()选择器选取的是除括号里的元素以外的其它元素 :first-child选择器是第一个元素 */
		.accordion>li:not(:first-child) label {
			border-top: 1px solid #38814d;
		}

		li label i {
			position: absolute;
			left: 20px;
		}


		li ol {
			width: 100%;
			background-color: #333;
		}



		/* 逻辑 */
		li input {
			/* 将单选按钮隐藏起来 */
			/* display: none; */
		}

		li label {
			/* 相对定位 */
			position: relative;
			/* label元素是行内元素 需要将其转为块级元素 才能设置宽度和高度 */
			display: block;
			width: 100%;
			padding: 20px 50px;
			color: #fff;
			background-color: #5fb878;
			cursor: pointer;
		}


		.text_item {
			position: relative;
			width: 100%;
			height: 0;
			line-height: 50px;
			padding-left: 20px;
			color: #fff;
			cursor: pointer;
			/* 加过渡 */
			transition: all 0.5s;
		}

		.radio_item:checked~.text .text_item {
			height: 50px;
		}
	</style>
	<ul class="accordion">
		<li>
			<!-- 单选框的id属性值和label 元素的for属性值相同时,就可以通过label
				元素来选中单选框, 每个单选框都有一个相同name属性 -->
			<!-- 这个属性主要作用是用来将单选框分类的,当每个name属性值相同时,那么这一组单选框就只能同时选中一个 -->
			<input type="radio" name="item" id="item1" class="radio_item" /><label for="item1">一级标题1<i
					class="fa fa-caret-right"></i></label>
			<ol class="text">
				<li class="text_item">二级标题1</li>
				<li class="text_item">二级标题2</li>
			</ol>
		</li>
		<li>
			<input type="radio" name="item" id="item2" class="radio_item" /><label for="item2">一级标题2<i
					class="fa fa-caret-right"></i></label>
			<ol class="text">
				<li class="text_item">二级标题1</li>
				<li class="text_item">二级标题2</li>
				<li class="text_item">二级标题3</li>
			</ol>
		</li>
		<li>
			<input type="radio" name="item" id="item3" class="radio_item" /><label for="item3">一级标题3<i
					class="fa fa-caret-right"></i></label>
			<ol class="text">
				<li class="text_item">二级标题1</li>

			</ol>
		</li>

	</ul>
</body>

</html>